import { useState } from 'react';

interface Props {
  list: string[]
  title: string
  fClick:(item:string)=>void
}
function ListGroup({ list, title ,fClick}: Props) {
  const [clickIndex, setClickIndex] = useState(-1);
  const showList = () => {
    return list.map((item, index) => (
      <li className={clickIndex === index ? 'list-group-item active' : 'list-group-item'} key={index}
       onClick={()=>{setClickIndex(index);fClick(item)}}>
        {item}
      </li>
    ));
  };
  return (
    <>
      <h1>{title}</h1>
      <ul className="list-group">{showList()}</ul>
    </>
  );
}
export default ListGroup;
